<script setup>

import {Avatar, GoodsFilled, HomeFilled, List, Menu, OfficeBuilding, UserFilled} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {computed} from "vue";
import {useStore} from "vuex";

defineProps({
  collapse: {
    type: Boolean,
    default: false
  }
})
// 获取路由器实例
const router = useRouter()
const store = useStore()
// const menu= [
//     {
//       menuName: '用户管理',
//       menuClick: 'user',
//       menuIcon: User
//     },
//     {
//       menuName: '管理员管理',
//       menuClick: 'admin',
//       menuIcon: User
//     }
//   ]
const menu = computed(() => store.state.menu)

// 从vuex中获取用户信息
// const menus = computed(() => store.state.menu.map(menu => ({
//   ...menu,
//   icon: resolveIconComponent(menu.icon) // 将图标名称解析为组件
// })))
// 将字符串映射到图标组件
const resolveIconComponent = (iconName) => {
  switch (iconName) {
    case "User":
      return UserFilled;
    case "Admin":
      return Avatar;
    case "Storage":
        return OfficeBuilding
    case "GoodsType":
      return Menu;
    case "Goods":
      return GoodsFilled;
    case "Record":
      return List;
    default:
      return HomeFilled;
  }
};
// 菜单点击处理
const handleMenuSelect = (index) => {
  // 可以在这里添加权限校验等逻辑
  router.push(index)
}

</script>

<template>
  <el-menu
      :router="true"
      :default-active="$route.path"
      :collapse="collapse"
      :collapse-transition="false"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="height: 100vh;"
      @select="handleMenuSelect"
  >
    <!-- 每个菜单项必须使用template -->
    <el-menu-item index="/home">
      <el-icon><HomeFilled /></el-icon>
      <template #title><span>首页</span></template>
    </el-menu-item>

    <!-- 动态渲染菜单项 -->
      <el-menu-item :index="'/'+item.menuClick" v-for="(item,i) in menu" :key="i">
        <el-icon><component :is="resolveIconComponent(item.menuIcon)" /></el-icon>
        <template #title><span>{{item.menuName }}</span></template>
      </el-menu-item>
  </el-menu>
</template>

<style scoped>/* 移除所有边框 */
.el-menu {
  border-right: none !important;
}

/* 折叠状态优化 */
.el-menu--collapse {
  width: 64px !important;
  border-right: none !important;
}

.el-menu--collapse .el-menu-item {
  padding: 0 18px !important;
  justify-content: center;
}
</style>
